<?php
// 初始化游戏棋盘
function initGameBoard() {
    $boardSize = 32;
    $board = array_fill(0, $boardSize, 0);
    // 示例：设置一些特殊格子，这里假设第 5、10、20 格为特殊格子
    $board[4] = 1;
    $board[9] = 1;
    $board[19] = 1;
    return $board;
}

// 初始化玩家信息
function initPlayers() {
    $players = [
        [
            'name' => 'Player 1',
            'position' => 0
        ],
        [
            'name' => 'Player 2',
            'position' => 0
        ]
    ];
    return $players;
}

$board = initGameBoard();
$players = initPlayers();
?>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>飞行棋网页游戏</title>
    <style>
        body {
            text-align: center;
        }

        #game-board {
            display: flex;
            flex-wrap: wrap;
            width: 640px;
            margin: 0 auto;
        }

        .cell {
            width: 80px;
            height: 80px;
            border: 1px solid #000;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .special {
            background-color: yellow;
        }

        .player {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            margin: 2px;
        }

        .player1 {
            background-color: red;
        }

        .player2 {
            background-color: blue;
        }
    </style>
</head>

<body>
    <h1>飞行棋网页游戏</h1>
    <div id="game-board">
        <?php
        foreach ($board as $index => $cellType) {
            $cellClass = $cellType === 1? 'cell special' : 'cell';
            echo '<div class="' . $cellClass. '" data-index="' . $index. '">';
            foreach ($players as $playerIndex => $player) {
                if ($player['position'] === $index) {
                    echo '<div class="player player' . ($playerIndex + 1). '"></div>';
                }
            }
            echo '</div>';
        }
        ?>
    </div>
    <button id="roll-dice">掷骰子</button>
    <p id="message"></p>

    <script>
        const board = document.querySelectorAll('.cell');
        const rollDiceButton = document.getElementById('roll-dice');
        const message = document.getElementById('message');
        let currentPlayer = 0;
        let players = <?php echo json_encode($players); ?>;

        rollDiceButton.addEventListener('click', function () {
            const diceValue = Math.floor(Math.random() * 6) + 1;
            const player = players[currentPlayer];
            const newPosition = player.position + diceValue;

            if (newPosition < board.length) {
                // 移除玩家原来位置的标记
                const oldCell = board[player.position];
                const oldPlayerElement = oldCell.querySelector('.player' + (currentPlayer + 1));
                if (oldPlayerElement) {
                    oldCell.removeChild(oldPlayerElement);
                }

                // 更新玩家位置
                player.position = newPosition;
                players[currentPlayer] = player;

                // 在新位置添加玩家标记
                const newCell = board[newPosition];
                const newPlayerElement = document.createElement('div');
                newPlayerElement.classList.add('player', 'player' + (currentPlayer + 1));
                newCell.appendChild(newPlayerElement);

                // 检查是否是特殊格子
                if (newCell.classList.contains('special')) {
                    message.textContent = `${player.name} 掷出了 ${diceValue}，到达特殊格子，有特殊效果（待实现）`;
                } else {
                    message.textContent = `${player.name} 掷出了 ${diceValue}，前进到第 ${newPosition + 1} 格`;
                }
            } else {
                message.textContent = `${player.name} 掷出了 ${diceValue}，超出棋盘范围，本次移动无效`;
            }

            // 切换玩家
            currentPlayer = (currentPlayer + 1) % players.length;
        });
    </script>
</body>

</html>